<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理界面</title>
    <link rel="stylesheet" th:href="@{/X-admin/css/font.css}">
    <link rel="stylesheet" th:href="@{/X-admin/css/xadmin.css}">
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/X-admin/lib/layui/layui.js}" charset="utf-8"></script>
    <script type="text/javascript" th:src="@{/X-admin/js/xadmin.js}"></script>
</head>
<body>
    <div class="demoTable">
        搜索ID：
        <div class="layui-inline">
            <input class="layui-input" name="id" id="demoReload" autocomplete="off">
        </div> <button id="search" class="layui-btn" data-type="reload">搜索</button>
    </div>
    <!--工具栏模板：-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
            <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
            <button class="layui-btn layui-btn-sm" lay-event="export">导出</button>
        </div>
    </script>
    <table id="demo" lay-filter="test"></table>
    <script type="text/html" id="toolbar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <script>
        layui.use('table', function(){
            var table = layui.table;

            //第一个实例
            table.render({
                elem: '#demo'
                ,toolbar: '#toolbarDemo'
                ,height: 312
                ,url: '/user/getData' //数据接口
                ,id: 'testReload'
                ,page: true //开启分页
                ,cols: [
                    [ //表头
                        {type:'checkbox', fixed: 'left'}
                        ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                        ,{field: 'username', title: '用户名', width:80}
                        ,{field: 'sex', title: '性别', width:80, sort: true, templet: function (data) {
                            return data.sex == '0' ? '女' : '男';
                        }}
                        ,{field: 'phone', title: '手机号码', width:100}
                        ,{field: 'email', title: '邮箱', width:100}
                        ,{field: 'status', title: '状态', width:80, templet: function (d) {
                            return d.status == '1' ? '启用' : '禁用';
                        }}
                        ,{field: 'birthday', title: '生日'}
                        ,{field: 'createTime', title: '创建时间'}
                        ,{fixed: 'right', title: '操作', toolbar: '#toolbar', width: 150}
                    ]
                ]
            });

            //监听工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        $.ajax({
                            type:'post',
                            data:{"ids":data.id},
                            url:'/user/delete',
                            success:function(data){
                                if(data.code==0){
                                    $('#search').click();
                                }
                                layer.close(index);
                                layer.msg(data.msg);
                            },error:function(code){
                                parent.layer.msg('操作失败!');
                            }
                        });
                    });
                } else if(obj.event === 'edit'){
                    xadmin.open('添加用户', '/user/toEditPage?id='+data.id, 600, 400);
                }
            });
            //触发事件
            table.on('toolbar(test)', function(obj){
                var checkStatus = table.checkStatus(obj.config.id);
                var data = checkStatus.data;
                switch(obj.event){
                    case 'add':
                        xadmin.open('添加用户', '/user/toAddPage', 600, 400);
                        break;
                    case 'delete':
                        //获取选中数量
                        var selectCount = checkStatus.data.length;
                        if(selectCount == 0){
                            layer.msg('批量删除至少选中一项数据',function(){});
                            return false;
                        }
                        layer.confirm('真的要删除选中的项吗？',function(index){
                            layer.close(index);
                            index = layer.load(1, {shade: [0.1,'#fff']});

                            var isStr="";
                            for(var i=0; i<selectCount; i++){
                                isStr = isStr + "," + checkStatus.data[i].id;
                            }
                            isStr = isStr.substring(1);
                            $.ajax({
                                type:'post',
                                data:{"ids":isStr},
                                url:'/user/delete',
                                success:function(data){
                                    if(data.code==0){
                                        $('#search').click();
                                    }
                                    layer.close(index);
                                    layer.msg(data.msg);
                                },error:function(code){
                                    parent.layer.msg('操作失败!');
                                }
                            });
                        })
                        break;
                    case 'update':
                        if(data.length!=1){
                            layer.msg('只能选中一条数据');
                            break;
                        }
                        xadmin.open('添加用户', '/user/toEditPage?id='+checkStatus.data[0].id, 600, 400);
                        break;
                    case 'export':
                        table.exportFile(['名字','性别','年龄'], [
                            ['张三','男','20'],
                            ['李四','女','18'],
                            ['王五','女','19']
                        ], 'xls'); //默认导出 csv，也可以为：xls
                        break;
                };
            });
            var $ = layui.$, active = {
                reload: function(){
                    var demoReload = $('#demoReload');

                    //执行重载
                    table.reload('testReload', {
                        page: {
                            curr: 1 //重新从第 1 页开始
                        }
                        ,where: {
                            key: {
                                id: demoReload.val()
                            }
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });


    </script>
</body>
</html>